<template>
  <div class="">
    <div class="navtag">
      <div :class="navId == 1 ? 'hover-red' : ''" @click="tabNav((id = 1))">
        系统消息
      </div>
      <div :class="navId == 2 ? 'hover-red' : ''" @click="tabNav((id = 2))">
        通知消息
      </div>
    </div>
    <div class="aaaa" v-if="navId == 1">
      <div class="a" style="display: flex">
        <!-- v-for="item in 4" :key="item -->
        <span
          style="
            width: 192px;
            height: 20px;
            font-family: Source Han Sans CN;
            color: #666666;
            font-size: 20px;
            font-weight: 700;
          "
          >收到的回复</span
        >
        <div class="d">2021.10.14</div>
      </div>
      <div class="b">
        <span
          >收到的回复内容展示位置收到的回复内容展示位置收到的回复内容展示位置</span
        >
      </div>
      <div class="c">
        <span
          style="
            width: 140px;
            height: 20px;
            font-family: Source Han Sans CN;
            font-weight: 700;
            color: #333333;
            font-size: 20px;
            margin-left: 50px;
            line-height: 40px;
          "
          >发送邮箱的标题</span
        >
        <br />
        <span
          style="
            width: 864px;
            height: 16px;
            font-family: Source Han Sans CN;
            color: #666666;
            font-size: 16px;
            margin-left: 50px;
          "
          :class="navId == 3 ? 'hover-red' : ''"
          @click="tabNav((id = 3))"
          >发送邮箱的内容发送邮箱的内容发送邮箱的内容发送邮箱的内容发送邮箱的内容…</span
        >
      </div>
      <div class="e"></div>
      <div class="a" style="display: flex">
        <!-- v-for="item in 4" :key="item -->
        <span
          style="
            width: 192px;
            height: 20px;
            font-family: Source Han Sans CN;
            color: #666666;
            font-size: 20px;
            margin-top: 10px;
            font-weight: 700;
          "
          >收到的回复</span
        >
        <div class="d">2021.10.14</div>
      </div>
      <div class="b">
        <span
          >收到的回复内容展示位置收到的回复内容展示位置收到的回复内容展示位置</span
        >
      </div>
      <div class="c">
        <span
          style="
            width: 140px;
            height: 20px;
            font-family: Source Han Sans CN;
            font-weight: 700;
            color: #333333;
            font-size: 20px;
            margin-left: 50px;
            line-height: 40px;
          "
          >发送邮箱的标题</span
        >
        <br />
        <span
          style="
            width: 864px;
            height: 16px;
            font-family: Source Han Sans CN;
            color: #666666;
            font-size: 16px;
            margin-left: 50px;
          "
          :class="navId == 3 ? 'hover-red' : ''"
          @click="tabNav((id = 3))"
          >发送邮箱的内容发送邮箱的内容发送邮箱的内容发送邮箱的内容发送邮箱的内容…</span
        >
      </div>

      <div class="e"></div>
      <div class="a" style="display: flex">
        <!-- v-for="item in 4" :key="item -->
        <span
          style="
            width: 192px;
            height: 20px;
            font-family: Source Han Sans CN;
            color: #666666;
            font-size: 20px;
            margin-top: 10px;
            font-weight: 700;
          "
          >收到的回复</span
        >
        <div class="d">2021.10.14</div>
      </div>
      <div class="b">
        <span
          >收到的回复内容展示位置收到的回复内容展示位置收到的回复内容展示位置</span
        >
      </div>
      <div class="c">
        <span
          style="
            width: 140px;
            height: 20px;
            font-family: Source Han Sans CN;
            font-weight: 700;
            color: #333333;
            font-size: 20px;
            margin-left: 50px;
            line-height: 40px;
          "
          >发送邮箱的标题</span
        >
        <br />
        <span
          style="
            width: 864px;
            height: 16px;
            font-family: Source Han Sans CN;
            color: #666666;
            font-size: 16px;
            margin-left: 50px;
          "
          :class="navId == 3 ? 'hover-red' : ''"
          @click="tabNav((id = 3))"
          >发送邮箱的内容发送邮箱的内容发送邮箱的内容发送邮箱的内容发送邮箱的内容…</span
        >
      </div>

      <div class="e"></div>
      <div class="f"><span>点击查看更多</span></div>
    </div>
    <div class="" v-if="navId == 2">
      <div class="aa">
        <div>邮件标题</div>
        <span>在此处输入标题</span>
      </div>
      <div class="bb">
        <div class="bb-a">
          <div class="bb-a-a">收件人</div>
          <div class="bb-a-b">
            请选择
            <span
              ><img
                src="@/assets/imgs/v.png"
                alt=""
                style="width: 13.83px; height: 8.41px"
            /></span>
          </div>
        </div>
        <div class="bb-a">
          <div class="bb-a-a">类型</div>
          <div class="bb-a-b">
            请选择
            <span
              ><img
                src="@/assets/imgs/v.png"
                alt=""
                style="width: 13.83px; height: 8.41px"
            /></span>
          </div>
        </div>
        <div class="bb-b">
          <div class="bb-b-a">
            <img
              src="@/assets/imgs/u.png"
              alt=""
              style="width: 14px; height: 14px; background-color: #ffffff"
            />
          </div>
          <div class="bb-b-b">匿名</div>
        </div>
      </div>
      <div class="cc"><span>问题正文内容:</span></div>
      <div class="dd">
        <div class="dd-a">点击上传附件</div>
        <div class="dd-b">附件的文件名.PPT</div>
        <div class="dd-c">提交</div>
      </div>
    </div>

    <div class="" v-if="navId == 3">
      <div class="aaa"><span>您发送的邮件已收到回复</span></div>
      <div class="bbb"><span>发件人：领导邮箱</span></div>
      <div class="ccc">
        <div class="ccc-a">
          <span
            >回复的内容展示回复的内容展示回复的内容展示回复的内容展示回复的内容展回复的内容展示回复的内容展示回复的内容展示示回复的内容展示回复的内容展示</span
          >
        </div>
        <div class="ccc-b"></div>
        <div class="ccc-c">
          <span>在2021年10月27日14：44发送邮件(邮件标题写到)</span>
        </div>
        <div class="ccc-d">
          <span
            >发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示发送邮件的内容展示。</span
          >
        </div>
      </div>
      <div class="ddd">
        <span
          style="
            width: 195px;
            height: 24px;
            font-family: Source Han Sans CN;
            color: #cbcbcb;
            font-size: 24px;
          "
          >附件的文件名.PPT</span
        >
        <span
          style="
            width: 48px;
            height: 24px;
            font-family: Source Han Sans CN;
            color: #b21315;
            font-size: 24px;
            margin-left:60px
          "
          >下载</span
        >
      </div>
      <div class="eee">
        <span>上一封</span>
        <span style="margin-left:130px;margin-right:130px">返回列表</span>
        <span>下一封</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "news",
  components: {},
  data() {
    return { navId: 1 };
  },

  methods: {
    tabNav(id) {
      this.navId = id;
    }
  }
};
</script>

<style lang="scss" scoped>
.navtag {
  height: 55px;
  display: flex;
  border-bottom: 1px solid #eaeaea;
  color: #666666;
  font-size: 18px;
  line-height: 55px;
  margin-bottom: 30px;
  div {
    width: 230px;
    text-align: center;
    cursor: pointer;
  }
  .hover-red {
    border-bottom: 5px solid #b21315;
  }
}
.a {
  margin-left: 56px;
}
.b {
  margin-left: 56px;
  margin-top: 15px;
}
.b > span {
  width: 594px;
  height: 18px;
  font-family: Source Han Sans CN;
  color: #333333;
  font-size: 18px;
  line-height: 30px;
}
.c {
  width: 950px;
  height: 70px;
  background-color: #f4f4f4;
  border-radius: 5px;
  margin-left: 120px;
  margin-top: 10px;
  margin-bottom: 30px;
}
.d {
  margin-top: 10px;
  margin-bottom: 5px;
  margin-left: 740px;
}
.e {
  width: 1020px;
  height: 0px;
  border: 1px dashed;
  border-color: #999999;
  margin-left: 50px;
  margin-top: 20px;
}
.f {
  width: 520px;
  height: 30px;
  background-color: #e4e4e4;
  border-radius: 5px;
  margin: auto;
  margin-top: 20px;
  text-align: center;
  line-height: 30px;
  margin-bottom: 2px;
}
.f > span {
  width: 144px;
  height: 18px;
  font-family: Source Han Sans CN;
  color: #666666;
  font-size: 18px;
  text-align: center;
}
.aa {
  display: flex;
  width: 1050px;
  height: 76px;
  border: 1px solid;
  border-color: #707070;
  border-radius: 5px;
  margin-left: 50px;
}
.aa > div {
  width: 190px;
  height: 76px;
  background-color: #b21315;
  border-radius: 5px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  line-height: 76px;
}
.aa > span {
  width: 168px;
  height: 24px;
  font-family: Source Han Sans CN;
  color: #999999;
  font-size: 24px;
  margin-left: 20px;
  margin-top: 22px;
}
.bb {
  display: flex;
  margin-top: 20px;
}
.bb-a {
  display: flex;
  width: 285px;
  height: 46px;
  border: 1px solid;
  border-color: #707070;
  border-radius: 5px;
  text-align: center;
  line-height: 46px;
  margin-left: 50px;
}
.bb-b {
  display: flex;
  margin-left: 380px;
  margin-top: 25px;
}
.bb-a-a {
  width: 104px;
  height: 46px;
  background-color: #b21315;
  border-radius: 5px;
  font-family: Source Han Sans CN;
  color: #ffffff;
  font-size: 18px;
}
.bb-a-b {
  margin-left: 20px;
  font-family: Source Han Sans CN;
  color: #000000;
  font-size: 18px;
}
.bb-a-b > span {
  margin-left: 33px;
}
.bb-b-a {
  margin-top: 5px;
  margin-right: 5px;
}
.cc {
  width: 1050px;
  height: 371px;
  border: 1px solid;
  border-color: #707070;
  border-radius: 5px;
  margin-left: 50px;
  margin-top: 30px;
}
.cc > span {
  width: 151px;
  height: 24px;
  font-family: Source Han Sans CN;
  color: #cbcbcb;
  font-size: 24px;
  margin-left: 33px;
  line-height: 60px;
}
.dd {
  display: flex;
  margin-left: 50px;
  margin-top: 30px;
}
.dd-a {
  width: 171px;
  height: 46px;
  background-color: #b21315;
  border-radius: 5px;
  font-family: Source Han Sans CN;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  line-height: 46px;
}
.dd-b {
  width: 195px;
  height: 24px;
  font-family: Source Han Sans CN;
  color: #cbcbcb;
  font-size: 24px;
  line-height: 46px;
  margin-left: 40px;
}
.dd-c {
  width: 171px;
  height: 46px;
  background-color: #b21315;
  border-radius: 5px;
  margin-left: 473px;
  font-family: Source Han Sans CN;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  line-height: 46px;
}
.aaa {
  margin-left: 50px;
  margin-top: 60px;
}
.aaa > span {
  font-family: Source Han Sans CN;
  color: #000000;
  font-size: 24px;
}
.bbb {
  margin-left: 50px;
  margin-top: 15px;
}
.bbb > span {
  font-family: Source Han Sans CN;
  color: #666666;
  font-size: 16px;
}
.ccc {
  width: 1060px;
  height: 371px;
  border: 1px solid;
  border-color: #707070;
  border-radius: 5px;
  margin-left: 50px;
  margin-top: 30px;
}
.ccc-a {
  width: 900px;
  margin-left: 33px;
  margin-top: 26px;
  height: 77px;
}
.ccc-a > span {
  font-family: Source Han Sans CN;
  color: #666666;
  font-size: 16px;
}
.ccc-b {
  width: 900px;
  height: 0px;
  border: 1px solid;
  border-color: #707070;
  margin-left: 34.5px;
}
.ccc-c > span {
  font-family: Source Han Sans CN;
  color: #666666;
  font-size: 16px;
}
.ccc-c {
  margin-left: 33px;
  margin-top: 26.5px;
}
.ccc-d {
  width: 900px;
  margin-left: 33px;
  margin-top: 10px;
  line-height: 25px;
}
.ccc-d > span {
  font-family: Source Han Sans CN;
  color: #666666;
  font-size: 16px;
}
.ddd {
  margin-left: 50px;
  margin-top: 25px;
}
.eee {
  margin-left: 500px;
  margin-top: 50px;
}
.eee > span {
  font-family: Source Han Sans CN;
  color: #333333;
  font-size: 18px;
  text-align: right;
  font-weight: 600;
}
</style>
